<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">归还电池</view>
		</view>
		<form>
			<view class="cu-form-group">
				<view class="title">订单号</view>
				<view>{{info.tradeNo}}</view>
			</view>
			<view class="cu-form-group">
				<view class="title">会员昵称</view>
				<view>{{info.memberName}}</view>
			</view>
			<view class="cu-form-group">
				<view class="title">电池类型</view>
				<view>{{info.batteryTypeName}}</view>
			</view>
			<view class="cu-form-group">
				<view class="title">电池序号号</view>
				<view>{{info.portableBatterySn}}</view>
			</view>
			<view class="cu-form-group">
				<view class="title">使用时长</view>
				<view>{{info.useDay}}天</view>
			</view>
			<view class="cu-form-group">
				<view class="title">预计支付金额</view>
				<view v-if="info.expectMoneyStr">{{info.expectMoneyStr}}元</view>
				<view v-else>{{info.moneyStr}}元</view>
			</view>
			<view class="cu-form-group">
				<view class="title">归还方式</view>
				<picker mode="selector" :range="typeArray" range-key="name" @change="bindTypeChangeIn">
					<view class="picker">{{revertTypeName}}</view>
				</picker>
			</view>
		    <view class="cu-form-group">
				<view class="title">归还网点</view>
				<view>{{placeName}}</view>
				<button class="cu-btn bg-orange shadow" @click="btnPlaceSelect()">选择</button>
		    </view>
			<view class="cu-form-group">
				<view class="title">设备关闭状态</view>
				<view>{{stateName}}</view>
				<button class="cu-btn bg-orange shadow" @click="btnSendClose()">发送命令关闭</button>
			</view>
			<view class="cu-form-group flex justify-around">
				<button class="cu-btn bg-grey shadow" @click="btnSendLight(0)">关闭灯光</button>
				<button class="cu-btn bg-orange shadow" @click="btnSendLight(1)">开启灯光</button>
			</view>
		</form>
		<view class="cu-bar btn-group margin-top">
		    <button class="cu-btn bg-grey shadow-blur round" @click="$utils.toBack()">取消</button>
			<button class="cu-btn bg-orange shadow-blur round" @click="btnSubmit()">归还</button>
		</view>
		
		<view class="cu-modal" :class="modalName=='placeModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">选择归还的网点</view>
					<view class="action" @click="btnHideModal()">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="solid-bottom bg-white">
				    <view class="cu-bar search">
				        <view class="search-form round">
				            <text class="cuIcon-search"></text>
				            <input type="text" placeholder="搜索网点名称" v-model="keyword"></input>
				        </view>
				        <view class="action">
				            <button class="cu-btn bg-orange shadow-blur round" @click="btnSearch()">搜索</button>
				        </view>
				    </view>
				</view>
				<view class="list-body">
					<scroll-view scroll-y @scrolltolower="scrollTolower">
					<view class="cu-card">
						<view class="cu-item padding-sm" v-for="(item,index) in listData" :key="index">
							<view class="text-df text-orange">{{item.name}}</view>
							<view>类型：{{item.typeNames}}</view>
							<view>地区：{{item.province}}-{{item.city}}-{{item.cityArea}}</view>
							<view class="flex justify-end"><button class="cu-btn bg-orange sm" @click="btnPlaceSelectSubmit(item)">确定</button></view>
						</view>
					</view>
					<view class="foot" v-if="listData && listData.length > 0"><text class="ftxt">我也是有底线的</text></view>
					<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const wx = require('@/js_sdk/jweixin.js');
	export default {
		data() {
			return {
				info:{},
				placeId:null,
				placeName:null,
				revertType:null,
				revertTypeName:null,
				
				stateName:'未发送命令',
				times:20,
				
				listData:[],
				keyword:'',
				pageNo:1,
				
				typeArray:[{type:2,name:'预约到店归还'},{type:3,name:'同城快递归还'}],
				
				modalName:null
			};
		},
		onLoad(option) {
			const _self = this;
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('fromData', function(data) {
			    console.log(data)
				_self.info = Object.assign({},data);
				_self.placeId = data.revertPlaceId;
				_self.placeName = data.revertPlaceName;
				if(!data.revertType || data.revertType == 1){
					_self.revertType = _self.typeArray[0].type;
					_self.revertTypeName = _self.typeArray[0].name;
				}else{
					_self.revertType = data.revertType;
					_self.revertTypeName = data.revertTypeName;
				}
				_self._loadListData();
			})
		},
		methods:{
			_loadListData:function(){
				if(this.pageNo > 0){
					const _self = this;
					const api = this.$request;
					api.post(api.url.placeList,{
						trim:this.keyword,
						pageNo:this.pageNo
					},(res)=>{
						if(res.code == 200){
							_self.listData = _self.listData.concat(res.body.items);
							_self.pageNo = _self.pageNo+1;
						}else if(res.code == 202){
							_self.pageNo = -1;
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false
							})
						}else{
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							})
						}
					})
				}
			},
			_sendCloseResult:function(){
				const _self = this;
				const api = this.$request;
				api.post(api.url.bxscnBatteryOperateResult,{
					tradeNo:this.info.tradeNo,
					deviceSn:this.info.portableBatterySn
				},(res)=>{
					console.log(res)
					if(res.code == 200){
						uni.hideLoading();
						_self.stateName = '发送命令成功';
						uni.showModal({
							content:'发送命令成功',
							showCancel:false
						})
					}else{
						_self.times = _self.times - 1;
						if(_self.times > 0){
							setTimeout(function(){
								_self._sendCloseResult();
							},1000);
						}
					}
				})
			},
			bindTypeChangeIn:function(e){
				let index = e.detail.value;
				let item = this.typeArray[index];
				this.revertType = item.type;
				this.revertTypeName = item.name;
			},
			btnSearch:function(){
				this.pageNo=1;
				this.listData=[];
				this._loadListData();
			},
			btnHideModal:function(){
				this.modalName = null;
			},
			btnPlaceSelect:function(){
				this.modalName = 'placeModal';
			},
			btnPlaceSelectSubmit:function(item){
				this.placeId = item.id;
				this.placeName = item.name;
				this.modalName = null;
			},
			btnSendClose(){
				if(!this.info.portableBatterySn){
					uni.showModal({
						title:'温馨提示',
						content:'请先填写电池序列号',
						showCancel:false
					})
					return;
				}
				const _self = this;
				const api = this.$request;
				uni.showModal({
					title:'温馨提示',
					content:'确定要发送命令关闭电池吗？',
					complete:function(res){
						if(res.confirm){
							uni.showLoading({
								title:'处理中...'
							})
							api.post(api.url.bxscnBatteryOperate,{
								tradeNo:_self.info.tradeNo,
								createDate:_self.info.createDate,
								deviceSn:_self.info.portableBatterySn,
								type:2
							},(res)=>{
								console.log(res)
								if(res.code==200){
									_self.times = 20;
									_self._sendCloseResult();
								}else if(res.msg){
									uni.hideLoading();
									uni.showModal({
										content:res.msg,
										showCancel:false
									})
								}else{
									uni.hideLoading();
									uni.showToast({
										title:'操作失败',
										icon:'error'
									})
								}
							})
						}
					}
				})
			},
			btnSendLight:function(type){
				uni.showLoading({
					title:'处理中...'
				})
				const _self = this;
				const api = this.$request;
				api.post(api.url.bxscnBatteryLightOperate,{
					deviceSn:_self.info.portableBatterySn,
					type:type
				},(res)=>{
					console.log(res)
					if(res.code==200){
						uni.hideLoading();
						uni.showToast({
							title:'操作成功',
							icon:'success'
						})
					}else if(res.msg){
						uni.hideLoading();
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else{
						uni.hideLoading();
						uni.showToast({
							title:'操作失败',
							icon:'error'
						})
					}
				})
			},
			btnSubmit:function(){
				if(!this.placeId){
					uni.showModal({
						title:'温馨提示',
						content:'请填写归还的网点'
					})
					return;
				}
				const _self = this;
				const api = this.$request;
				uni.showModal({
					title:'温馨提示',
					content:'确定要归还【'+this.info.portableBatterySn+'】电池吗？',
					complete:function(res){
						if(res.confirm){
							uni.showLoading({
								title:'处理中...'
							})
							api.post(api.url.bxscnShopOrderRevert,{
								tradeNo:_self.info.tradeNo,
								createDate:_self.info.createDate,
								placeId:_self.placeId,
								revertType:_self.revertType
							},(res)=>{
								console.log(res)
								uni.hideLoading();
								if(res.code==200){
									setTimeout(function(){
										uni.showModal({
											content:'归还成功',
											showCancel:false,
											complete:function(){
												uni.navigateBack();
											}
										})
									},700)
								}else if(res.msg){
									uni.showModal({
										content:res.msg,
										showCancel:false
									})
								}else{
									uni.showToast({
										title:'操作失败',
										icon:'error'
									})
								}
							})
						}
					}
				})
			},
			//滑动底部加载
			scrollTolower:function(e){
				console.log(e);
				this._loadListData();
			}
		}
	}
</script>

<style lang="less">
.list-body scroll-view{height:68vh;text-align:left;}
.list-body .cu-card .cu-item{margin:15rpx 20rpx;}
.cu-form-group uni-picker{padding-right:0;text-align:right;}
</style>
